<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background: #cdcdcd;
		}

		.controls{
			position: absolute;
			left: 150px;
			top: 10px;
			font: 12px Arial;
		}

		#canvas{
			position: absolute;
			left: 0;
			top: 20px;
			margin: 20px;
			border: inset thin solid rgba(100, 150, 230, 0.8);
			background: #efefef;
		}

		#animationButton{
			margin-left: 15px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<input id="animateButton" type="button" value="Animate" />

	<canvas id="canvas" width="800" height="300">
		Canvas not supported.
	</canvas>

	<div id="motionControls" class="controls">
		<div id="motionRadios">
			<input type="radio" name="motion" id="linearRadio" checked />Linear
			<input type="radio" name="motion" id="easeInRadio" />Ease In
			<input type="radio" name="motion" id="easeOutRadio" />Ease Out
			<input type="radio" name="motion" id="easeInOutRadio" />Ease In/Out
		</div>
	</div>
</body>
<script type="text/javascript" src="../Charpter-05/requestNextAnimationFrame.js"></script>
<script type="text/javascript" src="../Charpter-05/AnimationTimer.js"></script>
<script type="text/javascript" src="../Charpter-06/Sprite.js"></script>
<script type="text/javascript" src="../Charpter-06/SpriteSheetPainter.js"></script>
<script type="text/javascript" src="7.9.js"></script>
</html>